<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>权限管理系统－部门管理</title>
<script type="text/javascript" src="${resurl}/js/jquery.js"></script>
<script src="${resurl}/js/bootstrap.min.js" type="text/javascript"></script>
<script src="${resurl}/js/bootstrap-treeview.js" type="text/javascript"></script>
<link rel="stylesheet" href="${resurl}/css/bootstrap.min.css">
<link rel="stylesheet" href="${resurl}/css/common.css">
<link rel="stylesheet" href="${resurl}/css/bootstrap-treeview.css">
<script type="text/javascript">
	$(document).ready(
			function() {
				getTrees();
				//添加部门
				$("#adddept_btn").click(function(){
					var dept_id=$("input#selectedDeptId").val();
					var dept_name=$("input#selectedDeptName").val();
					var dept_spr=$("input#selectedDeptSpr").val();
					$("h4#adddept_modal_title").text("添加新部门");
					$("h5#currentDeptInfo").text("当前所选部门名称:"+dept_name+",部门ID："+dept_id+"，上级部门ID："+dept_spr);
				});
				$("button#modal_adddept_btn").click(function(){
					var dept_name=$("input#add_inputDeptName").val();
					var dept_spr=$("input#add_inputDeptSpr").val();
					var dept_sort=$("input#add_inputDeptSort").val();
					$.post("${resurl}/dept_insert.pms",{dept_name:dept_name,dept_spr:dept_spr,dept_sort:dept_sort},function(data,status){
						location.reload();
					});
					
				});
				//删除部门
				$("button#deldept_btn").click(function(){
					var dept_id=$("input#selectedDeptId").val();
					$.post("${resurl}/dept_delete.pms",{dept_id:dept_id},function(data,status){
						location.reload();
					});
					
				});
				//部门树节点选择
				$("#treeview").on("nodeSelected",function(event,node){
					$("input#selectedDeptId").attr("value",node.id);
					$("input#selectedDeptName").attr("value",node.text);
					$("input#selectedDeptSpr").attr("value",node.spr);
					queryuserinfo(node.id);
				});
				//打开用户选择窗口
				$("button#adduser_btn").click(function(){
					$.post("${resurl}/userinfo.pms",{begin:0,end:10},function(data,status){
						$("tbody#userinfobody").html("");
						$.each(data,function(index,userinfo){
							$("tbody#userinfobody").append(
									"<tr>"
									+"<td><input id=\""
									+userinfo.user_id
									+"\" name=\"modal_user_id\" type=\"checkbox\" value=\""
									+userinfo.user_id
									+"\"/></td>"
									+"<td>"
									+userinfo.user_nickname
									+"</td>"
									+"<td>有效</td>"
									+"</tr>"
							);
						});
					});
				});
				
				//绑定部门和用户
				$("button#modal_adduser_btn").click(function(){
					var user_ids=[];
					var dept_id=$("input#selectedDeptId:hidden").val();
					if(dept_id!=null&&dept_id!=""){
						$("input:checkbox[name='modal_user_id']:checked").each(function(index){
							user_ids[index]=$(this).val();
						});
						$.post("${resurl}/dept_adduser.pms",{dept_id:dept_id,user_ids:user_ids},function(data,status){
							queryuserinfo(dept_id);
						});
						closeModal("userlist_modal");
					}else{
						alert("请选择部门节点");
					}
					
				});
				
				//删除部门中的用户
				$("button#deleteuser_btn").click(function(){
					var user_ids=[];
					var dept_id=$("input#selectedDeptId:hidden").val();
					if(dept_id!=null&&dept_id!=""){
						$("input:checkbox[name='list_user_id']:checked").each(function(index){
							user_ids[index]=$(this).val();
						});
						$.post("${resurl}/dept_deluser.pms",{dept_id:dept_id,user_ids:user_ids},function(data,status){
							queryuserinfo(dept_id);
						});
					}else{
						alert("请选择部门节点");
					}
				});
			});
	//关闭模式窗口
	function closeModal(modal){
		$("div#"+modal).attr("class","modal fade").attr("style","display: none;").attr("aria-hidden","true");
		$("div.modal-backdrop.fade.in").remove();
		$("body").attr("class","");
	}
	//查询当前部门节点下的用户
	function queryuserinfo(dept_id){
		if(dept_id!=null){
			$.post("${resurl}/dept_user.pms",{dept_id:dept_id},function(data,status){
				$("tbody#userlist").html("");
				$.each(data,function(index,userinfo){
					$("tbody#userlist").append(
							"<tr>"
							+"<td><input id=\""
							+userinfo.user_id
							+"\" name=\"list_user_id\" type=\"checkbox\" value=\""
							+userinfo.user_id
							+"\"/></td>"
							+"<td>"
							+userinfo.user_name
							+"</td>"
							+"<td>"
							+userinfo.user_nickname
							+"</td>"
							+"<td>有效</td>"
							+"</tr>"
					);
			});
			});
		}
	}
	
	function init(tree){
		//加载部门树
		$("#treeview").treeview({
			data :tree,
			injectStyle: true,
			levels: 2,
			expandIcon: 'glyphicon glyphicon-menu-right',
			collapseIcon: 'glyphicon glyphicon-menu-down',
			emptyIcon: 'glyphicon',
			nodeIcon: 'glyphicon glyphicon-stop',
			color: undefined, // '#000000',
			backColor: undefined, // '#FFFFFF',
			borderColor: undefined, // '#dddddd',
			onhoverColor: '#F5F5F5',
			selectedColor: '#FFFFFF',
			selectedBackColor: '#428bca',

			enableLinks: false,
			highlightSelected: true,
			showBorder: true,
			showTags: false,

			// Event handler for when a node is selected
			onNodeSelected: undefined
		});
	}
	
/**
 * tree node properties:
	 id:部门id
	 text:部门名称
	 level:部门层级
	 sort:排序
 */
	function getTrees() {
		 var tree=[];
		 $.post("${resurl}/dept_tree.pms",{root:"0"},function(data,status){
			 tree=data;
			 init(tree);
		 });
	}
</script>
</head>
<body>
	<input id="selectedDeptId" type="hidden" value=""/>
	<input id="selectedDeptName" type="hidden" value=""/>
	<input id="selectedDeptSpr" type="hidden" value=""/>
	<nav class="navbar navbar-inverse navbar-fixed-top">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#navbar" aria-expanded="false"
					aria-controls="navbar">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="${resurl }/index.pms">权限管理系统</a>
			</div>
			<div id="navbar" class="navbar-collapse collapse">
				<ul class="nav navbar-nav navbar-right">
					<li><a href="#">设置</a></li>
					<li><a href="#">个人资料</a></li>
					<li><a href="#">帮助</a></li>
				</ul>
				<form class="navbar-form navbar-right">
					<input name="search" type="text" class="form-control"
						placeholder="查询...">
				</form>
			</div>
		</div>
	</nav>

	<div class="container-fluid">
		<div class="row">
			<div class="sidebar">
				<ul class="nav nav-sidebar">
					<li><a href="${resurl }/index.pms">首页</a></li>
					<li><a href="${resurl}/userindex.pms">用户管理</a></li>
					<li class="active"><a href="${resurl}/deptindex.pms">部门管理
							<span class="sr-only">(current)</span>
					</a></li>
					<li><a href="${resurl }/permindex.pms">权限管理</a></li>
					<li><a href="${resurl }/funindex.pms">功能管理</a></li>
				</ul>
			</div>
			<!-- 部门树 -->
			<div class="treeview" id="treeview"></div>

			<div class="deptmain">
				<h2 class="sub-header">用户列表</h2>
				<div id="operator" class="navbar-collapse collapse operation">
					<ul class="nav navbar-nav navbar-right">
							<li class="li-button"><button id="adddept_btn"
								class="btn btn-sm btn-primary btn-block" type="button"
								data-toggle="modal" data-target="#adddept_modal">新增部门</button></li>
						<li class="li-button"><button id="deldept_btn" class="btn btn-sm btn-danger btn-block" type="button">删除部门</button></li>
						<li class="li-button"><button id="adduser_btn"
								class="btn btn-sm btn-info btn-block" type="button"
								data-toggle="modal" data-target="#userlist_modal">新增员工</button></li>
						<li class="li-button"><button id="deleteuser_btn"
								class="btn btn-sm btn-danger btn-block" type="button">删除员工</button></li>
					</ul>
				</div>
				<div class="table-responsive">
					<table class="table table-striped">
						<thead>
							<tr>
								<th>选择</th>
								<th>登陆名</th>
								<th>昵称</th>
								<th>是否有效</th>
							</tr>
						</thead>
						<tbody id="userlist">
							
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade" id="adddept_modal" tabindex="-1"
		role="dialog" aria-labelledby="adddeptModelLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 id="adddept_modal_title" class="modal-title"></h4>
				</div>
				<div class="modal-body">
					<h5 id="currentDeptInfo" class="moda-title"></h5>
					<label for="add_inputDeptName">部门名称</label> 
					<input name="deptname_input" type="text" id="add_inputDeptName" class="form-control" placeholder="输入部门名称" required="" autofocus="">
					<label for="add_inputDeptSpr">上级部门ID</label> 
					<input name="deptspr_input" type="text" id="add_inputDeptSpr" class="form-control" placeholder="输入上级部门ID" required="" autofocus=""> 
					<label for="inputDeptSort">部门顺序号</label> 
					<input name="deptsort_input" type="text" id="add_inputDeptSort" class="form-control" placeholder="输入部门顺序号" required="" autofocus=""> 				
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
					<button id="modal_adddept_btn" type="button"
						class="btn btn-primary">添加</button>
				</div>
			</div>
		</div>
	</div>
	
	<div class="modal fade" id="userlist_modal" tabindex="-1"
		role="dialog" aria-labelledby="userlistModelLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 id="userlist_modal_title" class="modal-title">选择用户</h4>
				</div>
				<div class="modal-body">
					<table class="table table-striped">
						<thead>
						<tr>
						<td>选择</td>
						<td>用户名</td>
						<td>是否有效</td>
						</tr>
						</thead>
						<tbody id="userinfobody">
						<tr>
						<td><input id="user_info" name="modal_user_id" type="checkbox" value=""/></td>
						<td>111</td>
						<td>有效</td>
						</tr>
						</tbody>
					</table>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
					<button id="modal_adduser_btn" type="button"
						class="btn btn-primary">添加</button>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
